import React, { Component } from 'react'
import { Button, Space, Steps } from 'antd'
import _ from 'lodash'
import CountTimeDown from './CountTimeDown'
import TheDialog from '@/components/TheDialog'
import '../style/style.less'
import { CloseCircleFilled } from '@ant-design/icons'

const { Step } = Steps

export default class ChargebackSteps extends Component {
  state = {
    stepData: [],
    current: 0,
    moneyStatus: 'N',
    salesStatus: 1,
    date: null,
  }
  async componentDidMount() {
    await this.Minutes()
    this.getStepData()
    // console.log(this.state.date)
  }

  /**
   * 倒计时实现
   * @constructor
   */
  Minutes = () => {
    let date = new Date(this.props.countdown);
    let min = date.getMinutes();
    date.setMinutes(min);
    let newdate = date.toLocaleString('chinese', { hour12: false });   //获取24小时制，中国时间，打印出   2019/01/03/  08:40:32
    this.setState({
      date: newdate,
    })
  }
  getStepData = () => {
    const { moneyStatus, salesStatus, refreshPage } = this.props
    let stepData = []
    let current = 0
    switch (parseInt(salesStatus)) {
      case 1: //退款中
        switch (moneyStatus) {
          case 'Y': //N仅退款 Y退款退货
            stepData = [
              {
                title: '买家发起退款申请',
                description: '',
              },
              {
                title: <div className='steps-timer'>
                  <span>商家处理</span>
                  (剩余<CountTimeDown endTime={this.state.date} overCall={refreshPage} />)
                </div>,
                description: ''
              },
              {
                title: '买家寄回商品',
                description: '',
              },
              {
                title: '商家确认收货',
                description: '',
              },
              {
                title: '完成',
                description: '',
              },
            ]
            current = 1;
            break;
          case 'N': //N仅退款 Y退款退货
            stepData = [
              {
                title: '买家发起退款申请',
                description: '',
              },
              {
                title: <div className='steps-timer'>
                  <span>商家处理</span>
                  (剩余<CountTimeDown endTime={this.state.date} overCall={refreshPage} />)
                </div>,
                description: ''
              },
              {
                title: '完成',
                description: '',
              },
            ]
            current = 1;
            break;
          default: ;
        }
        break;
      case 2: //退款中，平台已同意
        switch (moneyStatus) {
          case 'Y':
            stepData = [
              {
                title: '买家发起退款申请',
                description: '',
              },
              {
                title: `商家同意退款`,
                description: '',
              },
              {
                title: '买家寄回商品',
                description: '',
              },
              {
                title: '商家确认收货',
                description: '',
              },
              {
                title: '完成',
                description: '',
              },
            ]
            current = 1;
            break;
          default: ;
        }
        break;
      case 3: //退款中，商品已寄回，待平台确认
        stepData = [
          {
            title: '买家发起退款申请',
            description: '',
          },
          {
            title: `商家同意退款`,
            description: '',
          },
          {
            title: '买家寄回商品',
            description: '',
          },
          {
            title: '商家确认收货',
            description: '',
          },
          {
            title: '完成',
            description: '',
          },
        ]
        current = 3;
        break;
      case 9: //退款成功
        switch (moneyStatus) {
          case 'N':
            stepData = [
              {
                title: '买家发起退款申请',
                description: '',
              },
              {
                title: `商家同意退款`,
                description: '',
              },
              {
                title: '退款成功',
                description: '',
              },
            ]
            current = 2
            break
          case 'Y':
            stepData = [
              {
                title: '买家发起退款申请',
                description: '',
              },
              {
                title: `商家同意退款`,
                description: '',
              },
              {
                title: '买家寄回商品',
                description: '',
              },
              {
                title: '商家确认收货',
                description: '',
              },
              {
                title: '退款成功',
                description: '',
              },
            ]
            current = 4;
            break;
          default: ;
        }
        break;
      case 4: //退款失败
        stepData = [
          {
            title: '买家发起退款申请',
            description: '',
          },
          {
            title: `商家拒绝退款`,
            description: '',
          },
          {
            title: '退款失败',
            description: '',
          },
        ]
        current = 2
        break
      case 5:
        stepData = [
          {
            title: '买家发起退款申请',
            description: '',
          },
          {
            title: `商家同意退款`,
            description: '',
          },
          {
            title: '买家超时未寄回商品',
            description: '',
          },
          {
            title: '退款失败',
            description: '',
          },
        ]
        current = 3
        break
      case 6:
        stepData = [
          {
            title: '买家发起退款申请',
            description: '',
          },
          {
            title: `商家同意退款`,
            description: '',
          },
          {
            title: '买家已寄回商品',
            description: '',
          },
          {
            title: '商家拒绝收货',
            description: '',
          },
          {
            title: '退款失败',
            description: '',
          },
        ]
        current = 4;
        break;
      default:
        break;
    }
    this.setState({
      stepData,
      current,
    })
  }
  render() {
    const { salesStatus, dataSource: { refuseComment } } = this.props
    return (
      <div>
        {parseInt(salesStatus) !== 0 && (
          <Steps progressDot current={this.state.current}>
            {_.map(this.state.stepData, (v) => {
              return (
                <Step
                  title={v.title}
                  description={
                    <div className={'order-details-time'}>{v.description}</div>
                  }
                />
              )
            })}
          </Steps>
        )}
        {parseInt(salesStatus) === 0 && (
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <CloseCircleFilled
              style={{ color: '#2b6dea', fontSize: 50, marginRight: 20 }}
            />
            <div>
              <div style={{ fontSize: 14, color: '#2b6dea' }}>退款关闭</div>
              <div style={{ fontSize: 14, color: '#2b6dea', marginTop: 5 }}>
                <span style={{ marginRight: 10 }}>原因:</span>
                <span>{refuseComment}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    )
  }
}
